import React, { memo, useCallback, useState } from 'react';
import { SectionV2Wrapper } from '@/views/home/c-cpns/home-section-v2/style'
import SectionHeader from '@/components/section-header'
import SectionTabs from '@/components/section-tabs'
import SectionRooms from '@/components/section-rooms'

const HomeSectionV2 = memo((props) => {
  const {infoData} = props
  const initialName = Object.keys(infoData.dest_list)[0]
  const [name, setName] = useState(initialName);
  const tabNames = infoData.dest_address?.map(item => item.name)
  console.log('tabNames',tabNames)

  // useCallback 性能优化，name 变化，仅更新SectionRooms
  const tabClickHandle = useCallback(function (index, name){
      setName(name)
    }, []
  );

  return (
    <SectionV2Wrapper>
      <SectionHeader title={ infoData.title } subtitle={ infoData.subtitle }></SectionHeader>
      <SectionTabs tabNames={ tabNames } tabClcik={ tabClickHandle }></SectionTabs>
      <SectionRooms roomList={ infoData.dest_list?.[name] } itemWidth='33.3333%'></SectionRooms>
    </SectionV2Wrapper>
  );
});

export default HomeSectionV2;

